<template>
  <m-modal
    :visible="visible"
    mask
    resizable
    :title="title"
    :showFooter="true"
    cancelText=""
    okText="关 闭"
    :width="416"
    :height="273"
    class="v-unable-checkIn-package"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="_content">
      <div class="g-m-r-8 g-pd-t-4">
        <el-icon style="color: red"><circle-close-filled /></el-icon>
      </div>
      <div class="__content-wrapper">
        <!-- <m-content v-if="renderContent"  :render="renderContent"/> -->
        <div class="__sub-title">
          {{ subTitle }}
        </div>
        <div
          v-if="content"
          class="__content"
        >
          {{ content }}
        </div>
        <div class="_con">
          <el-table
            border
            :data="tableData"
            style="width: 100%"
          >
            <!-- :header-cell-style="{background: 'var(--md-color-sub3)', color: '#000'}"> -->
            <el-table-column
              v-for="item in column"
              :key="item.props"
              :prop="item.props"
              :label="item.label"
            >
              <template #default="scope">
                <span :class="{ 'g-theme-color': item.isHighlight }">{{ scope.row[item.props] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { usePortal } from "@/common/usePortal";
import { toRefs } from "vue";
import { VersionCheckColumn, VersionDiffInfo } from "../config";
import { CircleCloseFilled } from "@element-plus/icons";
import { mixPopup } from "@/common/Portal";

defineOptions(
  mixPopup({
    name: "version-check-modals"
  })
);
const props = defineProps<{
  subTitle: string;
  content: string;
  tableData: VersionDiffInfo[];
  column: VersionCheckColumn[];
}>();

const emit = defineEmits<{
  (event: "sure", data: any): void;
  (event: "close", data: any): void;
}>();

const { visible, handleOk, handleCancel } = usePortal(emit);
const title = "提示";
const { subTitle, content, tableData } = toRefs(props);
</script>
<style lang="scss" scoped>
@import "@/assets/css/theme.scss";
.v-unable-checkIn-package {
  ._content {
    display: flex;
    background: white;
    .__icon-wrapper {
      width: 60px;
      flex: 0 0 60px;
    }
    .__content-wrapper {
      width: 100px;
      flex: 1 1 auto;
      .__sub-title {
        color: black;
        font-weight: 600;
        margin: 4px 0;
        font-size: 14px;
      }
      .__content {
        color: rgba($color: #000000, $alpha: 0.85);
      }
      .__sub-content {
        color: rgba($color: #000000, $alpha: 0.85);
      }
      .__explain {
        color: rgba($color: #000000, $alpha: 0.65);
      }
    }
    ._con {
      margin-top: 10px;
    }
  }
}
</style>
